7.1 How to keep data in client

• Can your web applications store data locally within the client's file system, so that other programs can use the data?
• Can the data stored in local storage be transferred to server-side scripts like cookies?
• Can the data stored in local storage be shared by all the programs from the same domain?
• localStorage.???() is used to set a data item, localStorage.???() is used to get a data item, and localStorage.???() is used to remove a data item.
• What kind of data can be stored?
• How do you think of localStorage.test = 'Wow!' and localStorage.setItem('test', 'Wow!')?
• Name and value pairs are always stored as strings. Can you store an object in localStorage? If so, how?

  localStorage.setItem("T1234567", JSON.stringify({name: "Agent Smith", age: 20}));
  alert(JSON.parse(localStorage.getItem("T1234567")).age);
  

• What is the life span of the data in localStorage?
• Do you remember how to delete a property of an object?
  .setItem(), .getItem(), .removeItem()
• How do you store data within the user's browser for only one session?
• How can you store server side data in client?
• Try this memo app. Add some memos, close it, reopen it, and display all the memos.
• Trial 1: Let's try to make a memo application using the local storage. In this exercise, 'db-demo' is used to keep string values. For testing, you store a memo, reload the page, and display the memo to see if you can.
  <label for='tr1-title'>Title: </label> <input id='tr1-title' placeholder='memo title'><br> <label for='tr1-memo'>Memo: </label> <textarea id='tr1-memo' cols='51' placeholder='memo content'></textarea><br> <div id='tr1-memos'>Memos = </div> <button id='tr1-keepit' type='button'>Keep it!</button> <button id='tr1-display' type='button'>Display all!</button> <button id='tr1-remove' type='button'>Remove all!</button> <script> // db : a linear array of associate array of title and memo, e.g., [{title:memo}, ...] $('#tr1-keepit').click(function() { // retrieve the db from localStorage with the name "db-memo" var db = localStorage.???("db-memo"); // retrieve the db // convert the db value to an object if (db == null) db = ???; // empty linear array else db = JSON.???(db); // [{title:memo}, ...] // construct an object for a new memo; {title:memo} var objNewMemo = ???; // empty object objNewMemo[????] = $("#tr1-memo").???(); // the title and memo // push the object into db db.???(objNewMemo); // convert db to a string and save it into the local storage db = ????(db); ???.???('db-memo', db); }); $('#tr1-display').click(function() { // retrive the db from the local storage var db = ????("db-memo"); // '[{title:memo}, ...]' // display the db $("#tr1-memos").???(???); }); $('#tr1-remove').click(function() { // remove the db from the local storage ????; }); </script> Submit

  
  
  

localStorage.setItem("john", JSON.stringify({name: "Smith", age: 20}));
localStorage.course = "COMP3540";
alert(JSON.parse(localStorage.getItem("john")).age + "; " + localStorage.course);

for (var p in localStorage)  // localStorage is an object.
    alert(p + ' -> ' + localStorage[p]);